<template>
	<div class="flex bg-blue-furn margin-top padding-lg" style="height:calc(100vh - 458px); min-height: 480px;">
		<!-- 过程数据 -->
		<div class="process-l">
			<div class="flex margin-top-xl">
				<div class="checkbox-box padding-lr-lg padding-tb-xs">
					<el-checkbox v-model="checked1" label="结晶器" size="large" />
					<el-checkbox v-model="checked2" label="结晶器" size="large" />
					<el-checkbox v-model="checked3" label="结晶器" size="large" />
				</div>
			</div>

			<div class="flex margin-top-lg margin-bottom-lg">
				<div class="checkbox-box padding-lr-lg padding-tb-xs">
					<el-checkbox v-model="checked3" label="铸流" size="large" />
					<el-checkbox v-model="checked4" label="铸流" size="large" />
				</div>
			</div>

			<pol-table ref="polTableRef" v-bind="tableOpt" height="300px"></pol-table>
		</div>
		<div class="flex-sub justify-center padding margin-left-xxl margin-top">
			<div class="lineChart-box" ref="lineChartRef"></div>
		</div>
	</div>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted } from 'vue';
	const { proxy } = getCurrentInstance();

	const checked1 = ref(false)
	const checked2 = ref(true)
	const checked3 = ref(true)
	const checked4 = ref(true)
	const checked5 = ref(true)

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '变量名', key: 'ItemCode', align: 'center' },
		{ label: '最小值', key: 'ItemName', align: 'center' },
		{ label: '最大值', key: 'ItemValue', align: 'center' },
		{ label: '平均值', key: 'IsDefault', align: 'center' },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '大包',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0'
			},
			{
				ItemCode: '中包',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0'
			}, {
				ItemCode: '结晶器',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0'
			}, {
				ItemCode: '铸流',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0'
			}, {
				ItemCode: '其他',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0'
			}
		]
	});


	// 折线图配置
	const lineChartRef = ref(null)
	let option = {
		backgroundColor: 'transparent', // 设置背景为透明
		tooltip: {
			trigger: 'axis',
			show: true // 确保 tooltip 是显示的
		},
		legend: {
			data: ['大包', '中包', '结晶器', '铸流', '其他']
		},
	
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['08:30', '08:40', '08:50', '09:00', '09:10', '09:20', '09:30']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
				name: '大包',
				type: 'line',
				stack: 'Total',
				data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
				name: '中包',
				type: 'line',
				stack: 'Total',
				data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
				name: '结晶器',
				type: 'line',
				stack: 'Total',
				data: [150, 232, 201, 154, 190, 330, 410]
			},
			{
				name: '铸流',
				type: 'line',
				stack: 'Total',
				data: [320, 332, 301, 334, 390, 330, 320]
			},
			{
				name: '其他',
				type: 'line',
				stack: 'Total',
				data: [820, 932, 901, 934, 1290, 1330, 1320]
			}
		]
	};

	onMounted(() => {
		const myChart = proxy.$echarts.init(lineChartRef.value, 'dark');
		myChart.setOption(option);
	})
</script>

<style lang="scss" scoped>
	.process-l {
		flex-basis: 35%;

		.checkbox-box {
			background: #E5F3FF;
			border-radius: 4px 4px 4px 4px;
		}
	}
	
	.lineChart-box{
		width: 100%;
		height: 450px;
	}
</style>